<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>添加小说</title>
</head>

<body class="layui-bg-gray">
    <!--顶部导航栏-->
    <div style="margin-bottom: 40px">
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item"><a href="">校园原创小说网</a></li>
            <li class="layui-nav-item"><a href="">玄幻</a></li>
            <li class="layui-nav-item"><a href="">都市</a></li>
            <li class="layui-nav-item"><a href="">仙侠</a></li>
            <li class="layui-nav-item"><a href="">科幻</a></li>
            <li class="layui-nav-item"><a href="">游戏</a></li>
            <li class="layui-nav-item"><a href="">历史</a></li>
            <li class="layui-nav-item"><a href="">排行</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">更多</a>
                <dl class="layui-nav-child ">
                    <!-- 二级菜单 -->
                    <dd><a href="">全部作品</a></dd>
                    <dd><a href="">二次元</a></dd>
                    <dd><a href="">奇幻</a></dd>
                    <dd><a href="">武侠</a></dd>
                    <dd><a href="">灵异</a></dd>
                    <dd><a href="">军事</a></dd>
                    <dd><a href="">现实</a></dd>
                    <dd><a href="">体育</a></dd>
                    <dd><a href="">短片</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item  layui-col-lg-offset2">
                <input type="text" placeholder="请输入标题" class="layui-input layui-bg-black"
                    style="border: none;width: 150px">
            </li>
            <li class="layui-nav-item"><a href="">注册</a></li>
            <li class="layui-nav-item"><a href="">登录</a></li>
            <li class="layui-nav-item"><a href="">我的书架</a></li>
        </ul>
    </div>
    <!--内容部分-->
    <div class="layui-fluid">
        <div class="layui-row  layui-col-space20">
            <!--博主信息列表-->
            <div class="layui-col-md3">
                <div class="layui-row" style="text-align: center;background-color:white;">
                    <div style="">
                        <img src="img/tangjss.jpg" style="width:80px;height:80px;margin-top: 40px;"
                            class="layui-circle">
                        <h3 style="margin-bottom: 20px">
                            <b>
                                <a href="">唐家三少</a>
                            </b>
                        </h3>
                        <h4 style="margin-bottom: 20px">作者简介</h4>
                        <hr style="margin-bottom: 30px">
                    </div>

                    <div style="" class="layui-col-md4">
                        <img src="img/novelnum.jpg" style="width:40px;height:40px;" class="layui-circle">
                        <h6 style="font-size: 4px;margin-top: 5px;">作品数量</h6>
                        <h6 style="font-size: 4px;margin-top: 5px;color: red"><b>19</b></h6>
                    </div>
                    <div style="" class="layui-col-md4">
                        <img src="img/textnum.jpg" style="width:40px;height:40px;" class="layui-circle">
                        <h6 style="font-size: 4px;margin-top: 5px;">累计字数</h6>
                        <h6 style="font-size: 4px;margin-top: 5px;color: red"><b>4028.86万</b></h6>
                    </div>
                    <div style="margin-bottom: 60px" class="layui-col-md4">
                        <img src="img/daynum.jpg" style="width:40px;height:40px;" class="layui-circle">
                        <h6 style="font-size: 4px;margin-top: 5px;">创作天数</h6>
                        <h6 style="font-size: 4px;margin-top: 5px;color: red"><b>5103</b></h6>
                    </div>

                </div>
            </div>
            <!--小说相关信息编辑-->
            <div class="layui-col-md9">
                <!--小说信息-->
                <div class="layui-card">
                    <div class="layui-row">
                        <div class="layui-card-header layui-col-md10">
                            <h3>小说信息</h3>
                        </div>
                        <div class="layui-col-md2">
                            <button type="button" class="layui-btn layui-bg-blue"
                                style="margin-top:10px;">修改小说信息</button>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-table" style="text-align: center">
                            <tr>
                                <td style="width:20%;background-color:orange;color: white">小说封面图片</td>
                                <td><img src="img/斗罗2.jpg"></td>
                            </tr>
                            <tr>
                                <td style="width:20%;background-color:orange;color: white">小说名称</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="width:20%;background-color:orange ;color: white">发表日期</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="width:20%;background-color:orange ;color: white">相关地点</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td style="width:20%;background-color:orange ;color: white">分类关键字</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!--小说内容管理-->
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h3>小说章节管理</h3>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-even lay-skin="line" id="countent"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="layui/layui.js"></script>
    <!--导航js-->
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;

            //…
        });
    </script>
    <!--博主小说列表json加载-->
    <script id="barDemo" type="text/html">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        layui.use(['table', 'laydate', 'form',
            'jquery'], function () {
                var table = layui.table;
                var $ = layui.jquery;
                var laydate = layui.laydate;
                var form = layui.form;

                table.render({
                    elem: '#countent'
                    , height: '800px' //高度最大化减去差值
                    , url: 'forum.json'
                    , page: true //开启分页
                    , even: true //每行颜色分隔
                    , skin: "nob"
                    , cellMinWidth: 35 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    //,toolbar: '#toolbarDemo'
                    , title: '用户数据表'
                    , cols: [[
                        {
                            field: '', width: 35, title: '',
                            templet: function (d) {
                                if (d.hot == 1) {
                                    return "<img src='img/tj.png' style='width:20px'>"
                                } else { return '' }
                            }
                        }
                        , {
                            field: '', width: 420, title: '',
                            templet: function (d) {
                                return "<a href=''>【" + d.serilize + "】" + d.topic + "</a>"
                            }
                        }
                        , {
                            field: '', width: 70, title: '',
                            templet: function (d) {
                                return "(" + d.reviewcounter + "/" + d.scancounter + ")"
                            }
                        }
                        , { field: 'createtime', title: '', width: 150, sort: true }
                        , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120 }
                    ]]
                });

                //监听工具条
                table.on('tool(demo)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        layer.alert('编辑行：<br>' + JSON.stringify(data))
                    } else if (obj.event === 'del') {
                        layer.confirm('真的删除行么', function (index) {
                            obj.del();
                            layer.close(index);
                        });
                    }
                });

            });
    </script>
</body>

</html>